<template>
  <AddOrEditDialog
    ref="addOrEditDialogRef"
    title="消纳场"
    dialogWidth="550px"
    formLabelWidth="130px"
    :formHeader="formHeader"
    :form="form"
    :action="action"
    :url="$urls.API_URL_BACKSTAGE_WASTE_WASTEDISPOSALINFO_MANAGE"
  />
</template>

<script lang="ts" setup>
import AddOrEditDialog from '@/components/base/table/form/AddOrEditDialog.vue';
import {
  defineExpose, defineProps, ref, withDefaults,
} from 'vue';
import { FormHeader } from '@/types/interface/base_interface';
// eslint-disable-next-line import/named
import { WasteDisposalInfo } from '@/types/interface/wastedisposal_interface';

// 接收父容器参数
interface Props {
  action?: string, // 表单的处理类型，post表示提交，put表示编辑
}

const props = withDefaults(defineProps<Props>(), {
  action: 'post',
});
// 表单元素
const formHeader = ref<FormHeader[]>([
  {
    label: '消纳场编号',
    prop: 'id',
    type: 'number',
    rules: [{
      required: true,
      message: '不能为空',
      trigger: 'blur',
    },
    ],
  },
  {
    label: '消纳场名称',
    prop: 'name',
    type: 'string',
    rules: [{
      required: true,
      message: '不能为空',
      trigger: 'blur',
    },
    ],
  },
  {
    label: '地址',
    prop: 'address',
    type: 'string',
    rules: [{
      required: true,
      message: '不能为空',
      trigger: 'blur',
    },
    ],
  },
  {
    label: '城市',
    prop: 'city',
    type: 'string',
    rules: [{
      required: true,
      message: '不能为空',
      trigger: 'blur',
    },
    ],
  },
  {
    label: '区域',
    prop: 'area',
    type: 'string',
    rules: [{
      required: true,
      message: '不能为空',
      trigger: 'blur',
    },
    ],
  },
  {
    label: '坐标',
    prop: 'coorDinate',
    type: 'number',
    rules: [{
      required: true,
      message: '不能为空',
      trigger: 'blur',
    },
    ],
  },
  {
    label: '边界',
    prop: 'bounDary',
    type: 'number',
    rules: [{
      required: true,
      message: '不能为空',
      trigger: 'blur',
    },
    ],
  },
  {
    label: '方量',
    prop: 'cubicMeter',
    type: 'number',
    rules: [{
      required: true,
      message: '不能为空',
      trigger: 'blur',
    },
    ],
  },
]);

// 表单对象
const form = ref<WasteDisposalInfo>();
let formInit: WasteDisposalInfo; // 记录表单第一次传入的值,用于表单重置恢复初始值使用
// 打开对话框，gong供父组件调用，传入表单对象
const addOrEditDialogRef = ref();
const openDialog = (wasteDisposalInfo: WasteDisposalInfo) => {
  formInit = { ...wasteDisposalInfo }; // 获取初始值，这里要做深拷贝，避免与form对象引用的地址一致，导致无法恢复初始值
  form.value = { ...wasteDisposalInfo };
  addOrEditDialogRef.value!.openDialog();
};
// 提交表单成功后的钩子函数
const afterSubmitSuccess = () => {
  // 让表单恢复为传入对象时的初始值，注意要深度拷贝，避免初始值收到污染
  form.value = { ...formInit };
};
// 暴露组件给父容器使用
defineExpose({
  openDialog,
});
</script>

<style scoped>

</style>
